<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> 二级分类">
          <div class="search-box">
            <!-- <b-button variant="outline-primary" @click="addLv2()">添加二级分类</b-button> -->
            <b-button variant="outline-primary" @click="addGoodsId()">添加goodsid</b-button>
          </div>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>序号</th>
                <th>名称</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in productList" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.class2name }}</td>
                <td>
                  <span class="badge badge-success" @click="lookThreePro(item.class2)">产品</span>
                  <span class="badge badge-success" @click="editProduct(item)">编辑</span>
                  <!--<span class="badge badge-danger" @click="deleteProduct(item.class2)">删除</span>-->
                </td>
              </tr>
            </tbody>
          </table>
          <br>
          <div slot="footer">
            <b-button type="submit" size="sm" variant="primary" @click="backPage()">
              <i class="fa fa-dot-circle-o"></i> 返回</b-button>
          </div>
        </b-card>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @open="handleDialogOpen" append-to-body>
      <lv2-form-editing @close="dialogVisible = false"
       :form="editingForm" :reset="resetFormRandom" :is-edit="isEdit" />
    </el-dialog>
  </div>

</template>

<script>
  import { mapState, mapActions, mapMutations } from 'vuex'
  import Lv2FormEditing from '@/components/Lv2FormEditing.vue'
  export default {
    name: 'lv2',
    components: { Lv2FormEditing },
    data () {
      return {
        /* lv1 class */
        lv1Class: '',
        /* 添加/编辑分类dialog */
        dialogVisible: false,
        dialogTitle: '',
        editingForm: {},
        isEdit: false,
        resetFormRandom: 0
      }
    },
    computed: {
      ...mapState('ci', ['lv1', 'lv2']),
      productList () {
        return this.lv2[this.lv1Class]
      }
    },
    methods: {
      ...mapActions('ci', ['fetchLv1', 'fetchLv2']),
      ...mapMutations('ci', ['setLv2Expired']),
      // 返回上一页
      backPage () {
        this.$router.go(-1)
      },
      // 打开添加浮层
      addLv2 () {
        this.dialogTitle = '添加二级分类'
        this.isEdit = false
        this.dialogVisible = true
        this.editingForm = {}
      },
      // 打开编辑浮层
      editProduct (item) {
        this.dialogTitle = `编辑${item.class2name}`
        this.isEdit = true
        this.dialogVisible = true
        this.editingForm = { ...item }
      },
      lookThreePro (class2) {
        this.$router.push({
          path: '/product/p_c_three?id=' + class2
        })
      },
      addGoodsId (class2) {
        this.$router.push({
          path: '/product/p_goodsid'
        })
      },
      /* 数据变化，更新数据 */
      updateData () {
        this.setLv2Expired({ c1: this.lv1Class })
        this.fetchLv2({ c1: this.lv1Class })
      },
      handleDialogOpen () {
        // if (this.editingForm.class2name) return
        this.resetFormRandom = Math.random()
      }
    },
    created () {
      this.lv1Class = this.$route.query.id
      /* 拉取lv1 */
      this.fetchLv1()
      /* 拉取lv2 */
      this.fetchLv2({ c1: this.lv1Class })
    }
  }
</script>
<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
  @import '../../styles/common';
  .modal-body select,
  .modal-body label {
    display: inline-block;
  }
  .form-control {
    display: inline-block;
    width: 95%;
  }
</style>
